<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="content_top">
            <el-row>
                <el-col :span="20">
                    <el-form :inline="true" size="mini" label-width="10px;">
                        <el-form-item label="社区:">
                            <el-input v-model="condition.name" class="form-item"></el-input>
                        </el-form-item>
                        <el-button icon="el-icon-search" type="primary" size="mini" @click="loadList">查 询&nbsp;&nbsp;</el-button>
                    </el-form>
                </el-col>
                <el-col :span="4" style="text-align: right">
                    <el-button icon="el-icon-plus" type="success" circle size="mini" @click="showSave(null)"></el-button>
                </el-col>
            </el-row>
        </div>

        <el-table :data="data.data" border stripe highlight-current-row style="width: 100%" size="mini">
            <el-table-column type="index" header-align="center" align="center" width="60px"/>
            <el-table-column prop="name" label="社区名称" header-align="center" align="center"/>
            <el-table-column prop="createUserName" label="创建人" header-align="center" align="center" width="150px"/>
            <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="150px;"/>
            <el-table-column prop="action" fixed="right" label="操作" header-align="center" align="center" width="150px;">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="showSave(scope.row.id)">修改</el-button>
                    <el-button type="text" size="mini" @click="remove(scope.row.id)" style="color: red">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="content_bottom" style="text-align: center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="condition.currentPage" :page-size="condition.pageSize" :total="data.total"
                           :page-sizes="[10, 15, 20, 30, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import yesNoAllData from "@/data/yes-no-all.json"
    import {communityList, removeCommunity} from '@/api/base/community'
    import AreaSelect from '@/components/base/area/AreaSelect'

    export default {
        name: 'Community',
        components: {
            "area-select": AreaSelect
        },
        data() {
            return {
                loading: false,
                yesNoAll: yesNoAllData,
                condition: {
                    currentPage: 1,
                    pageSize: 30,
                    isRelation: -1,
                    name: ""
                },
                data: {},
            }
        },
        computed: {},
        mounted() {
            this.loadList()
        },
        methods: {
            handleSizeChange(val) {
                this.condition.pageSize = val
                this.loadList()
            },
            handleCurrentChange(val) {
                this.condition.currentPage = val
                this.loadList()
            },
            async loadList() {
                let params = JSON.parse(JSON.stringify(this.condition))
                this.loading = true
                let res = await communityList(params)
                this.loading = false
                if (res.code !== "0") return
                this.data = res
            },
            remove(id) {
                this.$confirm('此操作将永久删除该小区, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.removeIng(id);
                });
            },
            async removeIng(id) {
                this.loading = true;
                let res = await removeCommunity(id);
                this.loading = false
                if (res.code !== '0') {
                    this.$message.warning(res.message)
                    return
                }
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.loadList()
            },
            showSave(id) {
                if (id) {
                    window.localStorage.setItem("communityId", id);
                    this.$router.push({name: 'base-community-save'})
                } else {
                    window.localStorage.removeItem("communityId");
                    this.$router.push({name: 'base-community-save'})
                }
            }
        }
    }
</script>

<style scoped>
</style>
